<template>
  <breadCrumb ref="breadCrumbRef" :item="item"></breadCrumb>
  <div class="table-wrapped">
    <div class="table-top">
      <div class="table-header">
        <div>
          <el-input v-model="operation_person" class="w-50 m-2" size="large" placeHolder :prefix-icon="Search"
            @change="GetRecentTenOperateLog"  clearable @clear="getOperationLogByPager" ></el-input>
        </div>
        <div class="upload-wrapped">
          <el-button type="danger" @click="goClear">清空操作日志</el-button>
        </div>
      </div>
      <div class="table-content">
        <el-table :data="tableData">
          <el-table-column prop="operation_person" label="操作者" >
						<template #default="{row}">
							<div :class="getLevel(row.operation_level)">
								<span class="person">{{row.operation_person}}</span>
							</div>
						</template>
					</el-table-column>
          <el-table-column prop="operation_content" label="操作内容" />
          <el-table-column prop="operation_level" label="操作等级">
						<template #default="{row}">
							<el-tag class="ml-2" :type="getLevel(row.operation_level)">{{row.operation_level}}</el-tag>
						</template>
					</el-table-column>
          <el-table-column prop="operation_time" label="操作时间" width="200">
						<template #default="{row}">
							<div>{{row.operation_time?.slice(0,16)}}</div>
						</template>
					</el-table-column>
        </el-table>
      </div>
    </div>
    <div class="table-footer">
      <el-pagination :page-size="paginationData.PageSize" :current-page="paginationData.CurrentPage"
        :total="paginationData.Total" layout="prev, pager, next" @current-change="changePage" />
    </div>
  </div>
  <tips ref="tipsRef"></tips>
</template>

<script lang="ts" setup>
import { ref, reactive, Ref } from 'vue'
import breadCrumb from '../../components/breadCrumb.vue'
import  tips from './components/tips.vue'
import { GetRecentTenOperateLogAPI, getOperationTotalAPI, GetOperateLogListByPagerAPI } from '../../api/operate_log'
import { Search } from '@element-plus/icons-vue'

// 面包屑
const breadCrumbRef = ref()

// 面包屑参数
const item = ref({
  first: '操作日志',
})


const operation_person = ref()
// 搜索之后函数
const GetRecentTenOperateLog = async () => {
  const res = await GetRecentTenOperateLogAPI({ operation_person: operation_person.value })
  tableData.value = res.data.data
}


// 登录次数表格数据
const tableData = ref()

// 分页数据
const paginationData = reactive({
  // 登录次数总数
  Total: 1,
  // 登录次数列表当前所处页数
  CurrentPage: 1,
  PageSize: 10,
})


// 获取第一页登录日志
const getOperationLogByPager = async () => {
  paginationData.CurrentPage = 1
  const res = await GetOperateLogListByPagerAPI({ pager: paginationData.CurrentPage, })
  tableData.value = res.data.data
}

getOperationLogByPager()


// 获取登录日志总数
const getLoginLogTotal = async () => {
  const res = await getOperationTotalAPI()
  paginationData.Total = res.data.data
}
getLoginLogTotal()


// 换页
const changePage = async (val: number) => {
  paginationData.CurrentPage = val
  const res = await GetOperateLogListByPagerAPI({ pager: paginationData.CurrentPage})
  tableData.value = res.data.data
}


// 获取等级
const getLevel = (level: string) => {
  switch (level) {
    case '高级':
      return 'danger'
    case '中级':
      return 'warning'
    case '低级':
      return 'normal'
  }
}


// 清除日志弹框
const tipsRef = ref()
const goClear = () => {
  tipsRef.value.open()
}



</script>

<style scoped lang="scss">
:deep(.el-table .cell) {
  font-weight: 400;
}

a {
  color: #fff;
  display: block;
  text-decoration: none;
}

.table-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.table-wrapped {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 96%;
}
:deep(.el-table .cell) {
		font-weight: 400;
	}

	a {
		color: #fff;
		display: block;
		text-decoration: none;
	}
	
	.person{
		margin-left: 8px;
	}
	
	.danger{
		border-left: 2px solid red;
	}
	
	.warning{
		border-left: 2px solid yellow;
	}
	
	.normal{
		border-left: 0;
	}
</style>